<template>
	<view class="headerNavbar" :style="{ height: navbarHeight + 'px', backgroundColor: props.backgroundColor }">
		<view class="titleBar" :style="{ height: capsuleHeight + 'px', top: TimeBarHeight + 'px' }">
			<view class="back" @click="goback" :style="{ height: capsuleButton + 'px', width: capsuleButton + 'px' }">
				<image v-if="props.backIcon" :src="backIcon" mode="widthFix" @click="goback"></image>
			</view>
			<view class="title" v-if="shouldShowTitle">{{ title }}</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,computed} from 'vue';
	import {TimeBarHeight,capsuleHeight,navbarHeight,capsuleButton} from '@/config/systemInfo.js'

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		backIcon:{
			type:String,
			default:'/static/product-cwr/left-icon.png'
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		// 判断是返回上一页还是回其他页
		BackPage: {
			type: Number,
			default: 1,
		},
		BackPath: {
			type: String,
			default: '/pages/home/index' 
		}
	});

	// 返回页面
	const goback = () => {
		if (props.BackPage === 0) {
			// 返回其他页
			uni.reLaunch({
				url: props.BackPath 
			});
		} else {
			// 返回上一页
			uni.navigateBack({
				delta: 1
			});
		}
	};
	
	const shouldShowTitle = computed(() => {
		return props.backgroundColor === '#fff';
	});
</script>


<style scoped lang="scss">
	.headerNavbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		transition: background-color 0.3s;
		.titleBar {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			.title {
				width: 100%;
				position: absolute;
				text-align: center;
			}

			.back {
				position: absolute;
				left: 25rpx;
				width: 48rpx;
				height: 48rpx;
				background-color: rgba(255, 255, 255, .7);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 24rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>